import {useEffect} from 'react';
import {connect} from 'react-redux';
import Taro from '@tarojs/taro';
import {View, Text} from '@tarojs/components';
import {Tag} from '@nutui/nutui-react-taro';
import './index.less';

const  typeRange = [
  {
    id: 'jian',
    value: '尖',
    color: '#ed5565'
  },
  {
    id: 'feng',
    value: '峰',
    color: '#f8ac59'
  },
  {
    id: 'ping',
    value: '平',
    color: '#23c6c8'
  },
  {
    id: 'gu',
    value: '谷',
    color: '#1ab394'
  },
  {
    id: 'biao',
    value: '标准',
    color: '#3574f0'
  }
]
function Card({cur}){
  return (
    <View className={cur.flag ? 'currentCard' : 'card'} id={cur.flag ? 'currentCardWithId' : ''}>
      {
        cur.flag ? <View className='currentTag' >当前计费时段</View> : null
      }
      <View className='cardTitle'>
        <Tag style={{lineHeight: '36rpx'}} round background={typeRange.find((l) => l.value === cur.type)?.color}>{cur?.type}</Tag>
        &nbsp;
        <Text>{cur?.timeStr}</Text>
      </View>
      <View className='cardContent'>
        <View className='contentLine'>
          <View>电费</View>
          <View>{cur.chargePrice.toFixed(2)} 元/度</View>
        </View>
        <View className='contentLine'>
          <View>服务费</View>
          <View>{cur.servicePrice.toFixed(2)} 元/度</View>
        </View>
        <View className='contentLine'>
          <View>总计</View>
          <View><Text style={{fontSize: '36rpx', fontWeight: 'bold'}}>{(cur.chargePrice + cur.servicePrice).toFixed(2)}</Text> 元/度</View>
        </View>
      </View>
    </View>
  )
}
function Rate({rateDetail = []}){
  useEffect(() => {
    const currentCardWithIdDom = document.getElementById('currentCardWithId');
    if (currentCardWithIdDom){
      Taro.pageScrollTo({
        selector: '#currentCardWithId',
      });
    }
  }, []);
  const rateList = rateDetail.length ? rateDetail.map((i) => {return {...i, timeStr: i?.timeStr.replace('-', '~')}}) : []
  console.log('rateList', rateList);
  const newList = rateList.reduce((acc, cur) => {
    if (acc){

    }
  })
  return (
    <View className='rateWrap'>
      {rateList.length && rateList.map((i) => <Card cur={i} />)}
    </View>
  )
}

export default connect(({stations: {rateDetail = []}}) => { return{rateDetail} })(Rate)
